const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

const commonCssloader = [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
        loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    [
                        "postcss-preset-env",
                        {
                            browsers: "last 2 versions",
                        },
                    ],
                ],
            },
        },
    },
];

module.exports = {
    entry: "./src/js/index.js",
    output: {
        filename: "js/index.js",
        path: resolve(__dirname, "dist"),
        environment: {
            // 不使用箭头函数
            arrowFunction: false,
            const: false,
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssloader],
            },
            {
                test: /\.less$/,
                use: [...commonCssloader, "less-loader"],
            },
            /**
             * 语法检测
             * 设置检测规则:
             *      package.json中eslintConfig中设置
             *          "eslintConfig": {
             *              "extends": "airbnb-base"
             *          }
             */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                // 优先执行
                enforce: "pre",
                loader: "eslint-loader",
                options: {
                    fix: true,
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                useBuiltIns: "usage",
                                corejs: "3",
                                targets: {
                                    chrome: "74",
                                    ie: "10",
                                },
                            },
                        ],
                    ],
                },
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 8 * 1024,
                    outputPath: "images",
                    name: "[hash:10].[ext]",
                },
            },
            {
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    esModule: false,
                },
            },
            {
                exclude: /\.(js|css|less|html|jpg|png|gif)$/,
                loader: "file-loader",
                options: {
                    outputPath: "assets",
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
            },
        }),
        new MiniCssExtractPlugin({
            filename: "css/index.css",
        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    mode: "production",
};
